<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="704px"
      title="出梁"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body" id="curve-modal-body">
        <a-row :gutter="0">
          <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <a-col :span="24">
              <a-form-model-item label="出梁时间" prop="ylEndTime">
                <a-date-picker
                  style="width: 100%"
                  v-model="form.ylEndTime"
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                  placeholder="请选择出梁结束时间"
                />
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" @click="onSubmit()" :loading="buttonLoading">
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip } from "@/utils";
import moment from "moment";
import { traceabilitySaveJq } from "@/api/wisdom-beam/quality-app";
export default {
  name: "addModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      buttonLoading: false,
      form: {
        ylEndTime: "",
      },
      rules: {
        ylEndTime: [
          {
            required: true,
            message: "请输入出梁结束时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    moment,
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          let { id } = this.dataSource;
          let { ylEndTime } = this.form;
          traceabilitySaveJq({
            id,
            ylEndTime,
          })
            .then((res) => {
              this.closeModal();
              notificationTip("success", "操作成功");
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.buttonLoading = false;
            });
        }
      });
    },
    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
    //重置表单
    resetForm() {
      this.form = {
        ylEndTime: "",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0;
  }

  .curve-modal-body {
    padding: 20px 60px 20px 20px;
    max-height: 630px;
    .custom-scrollbar();
    .ant-calendar-panel {
      .ant-calendar-year-panel-cell-disabled {
        .ant-calendar-year-panel-year {
          background: #f5f5f5;
          color: rgba(0, 0, 0, 0.25);
        }
      }
    }
  }
  .curve-modal-footer {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    .flex();
    .ant-form-item-label {
      width: 150px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 40px;
      line-height: 30px;
      label {
        color: #999999;
      }
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
